<template>
  <view class="innerContain">
    <view class="top-content"></view>
    <view class=topradio>
      <view class="top">
        <innerCard :data="data" :cartcount='cartcount' :header='name' />
      </view>
      <view class="childborder" >
        <uni-list class="list" style="background-color:transparent">
          <uni-list-item v-if="List.length<1" class="childbordernull" >
            <template slot="body" style="">
              <view  class="" style="color: gray;">
                暂无检查项
              </view> 
            </template>
          </uni-list-item>
          <uni-list-item
            v-else
            v-for="(ite,index) in List " :key="index"
            :border-top="false"
            showArrow="true"
            :title="ite.item"
            clickable
            @click="clickFirst(ite)"
            class="childborderlist">
            <template slot="body" style="">
              <view class="list-icon red" >
                <view class="list-icon-title">
                  <text style="font-weight: 500;font-size:33rpx">{{ite.item}}</text>
                </view>
                <view class="list-icon-icon trueorfalse" >
                  <image
                    v-show="obj[ite.item]=='正常'"
                    style="width:45rpx:height:45rpx"
                    src="../../static/true.png"
                  /> 
                  <image
                    v-show="obj[ite.item]=='异常' "
                    src="../../static/false.png"
                  />
                </view>
              </view> 
            </template>
          </uni-list-item>
        </uni-list>
      </view>
    </view>
  </view>
</template>
<script>
import innerCard from "../details/detailmodel";
import {
  pointCheckDeviceDetail,
  pointCheckConfig,
  pointCheckDeviceDetailList,
} from "@/api/index.js";
export default {
  components: {
    innerCard
  },
  onLoad(val) {
    this.id = val.taskId;
    this.cartcount = getApp().globalData.uname;
    this.name = val.name;
    this.productId = val.productId;
    this.projectId = val.projectId;
    this.phone=val.phone
    this.manufacturer=val.manufacturer
    this.List=JSON.parse(val.ite).pointCheckDeviceDetails
  },
  onShow() {
    this.getList()
  },
  data() {
    return {
      dataList: [],
      List: [],
      obj:{},
      isDeal:{},
      data: {}
    };
  },
  methods: {
    getList(){
      pointCheckDeviceDetailList(this.id).then(res=> {
        this.obj={} 
        this.isDeal={}
        res.rows.forEach(item => {
          if(item.type==this.name){
            this.obj[item.item]= item.status
            this.isDeal[item.item]=item.deal
          }
        })
      })
    },
    clickFirst(ite) {
        uni.navigateTo({
          url:
            "../details/detailsdemo?data=" +ite.item +
            "&Tdata=" +
            this.id +
            "&tableheader=" +ite.type+'&header='+ite.item+'&phone='+this.phone+'&manufacturer='+this.manufacturer+"&configInfoID="+ite.id+"&category="+ite.category
        });
      // }
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .uni-list--border-top {
  display: none !important;
} 
.childborderlist {
  background-color:transparent;
  margin-top:-4rpx;
  padding:26rpx 0rpx 26rpx 0rpx
}
.childbordernull {
  background-color:transparent;
  margin-top:-4rpx;
  padding:26rpx 0rpx 26rpx 0rpx;
}
.innerContain {
  height: 100%;

  position: relative;
  background-color: white;
}
.top-content {
  height: 160rpx;
  background: linear-gradient(to left, #1040be, #026dff);
}
.topradio {
  height: calc(100% - 200rpx);
  overflow-y: auto;
  position: absolute;
  background-color: white;
  width: 100%;
  top: 50rpx;
  border-radius: 40rpx 40rpx 0 0;
}
.top {
  padding: 16rpx;
  /* box-shadow: 20px -77px 0px 19px #c6c6ca; */
  box-shadow: 4rpx 4rpx 20rpx #e5e1e1;
  margin: 24rpx;
  border-radius: 32rpx;
}
.childborder {
  padding: 0rpx 34rpx;
  margin: 24rpx;
  box-shadow: 0px 6px 33px #e5e1e1;
  border-radius: 32rpx;
  overflow: hidden;
}
.trueorfalse {
  margin-right: 20rpx;
  top: 6rpx;
}
.red1 {
  padding: 25rpx 0rpx 0rpx 0rpx;
}
.paddingbottom {
  padding: 0rpx 0rpx 24rpx 0rpx;
}
.list-icon{
  width:550rpx;
  .list-icon-title{
    width: 90%;
  }
}
</style>